<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../main/webapp/css/jjmenu.css?d=1" type="text/css">
    <title>jjmenu - context menu jquery plugin</title>
    <script src="../main/webapp/script/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="../main/webapp/script/jjmenu.js" type="text/javascript"></script>
</head>
<body>


<div id="lk">

<div>
    <a name="demos" class="h3">Demos</a>
    <p class="mt">
        1. Simple, static menu:
        <a href="#" id="staticMenuL_01" class="test_jj_menu">[Click Me With LeftMouseButton]</a>
        <br/>
        <a href="#" id="staticMenuL_02" class="test_jj_menu">[Click Me With LeftMouseButton]</a>
        <script type="text/javascript">

            $(".test_jj_menu").each(function() {
                var aId = $(this).attr('id');
                var options1 = [
                    {title:"Menu Item 1 - Go TO www.google.com", action:{type:"gourl",url:"http://www.google.com/"}},
                    {title:"Menu Item 2 - do <b style='color:red;'>nothing</b>"},
                    {title:"Menu Item 3 - submenu", type:"sub", src:[{title:"Submenu 1"},{title:"Submenu 2"},{title:"Submenu 3"}, {title:"Submenu 4 - submenu", type:"sub", src:[{title:"SubSubmenu 1"},{title:"SubSubmenu 2"}]}]},
                    {title:"Menu Item 4 - Js function", action:{type:"fn",callback:"(function(){ alert('THIS IS THE TEST'); })"}},
                    {title:"Menu Item 5 - Js REAL function",
                        action:{
                            type:"fn0",
                            callback: function(){
                                alert('THIS IS THE TEST, aId: ' + aId);
                                return false;
                            }
                        }
                    }
                ];
                $(this).jjmenu("click", options1);
            });


        </script>
    </p>

    <p class="mt">
        2. Pass dynamic parameters ( type here: <input type="text" name="test" id="test" value="Blah blah" /> )
        <a href="#" id="staticMenuR" class="SomeClass">[Click Me With RightMouseButton]</a>
        <script type="text/javascript">
            var options2 = [
                {title:"Show myid", action:{type:"fn",callback:"(function(data) { alert(data.myid); })"}},
                {title:"Show input value", action:{type:"fn",callback:"(function(data) { alert('Input name = '+data.inputValue()); })"}},
                {title:"Show clicked element className", action:{type:"fn",callback:"(function(data) { alert('Clicke item class name = '+triggerElement.className); })"}},
                {title:"Search for <b style='color:yellow'>#inputValue#</b> in new window", action:{type:"gourl",url:"http://www.google.com/search?q=#inputValue#", target:"_blank"}},
            ];

            jQuery("a#staticMenuR").jjmenu("rightClick", options2, {inputValue: function() { return jQuery("#test").val() }, myid:5});
        </script>
    </p>

    <p class="mt">

        3. AJAX items <a href="#" id="MenuB">[Click Me With Left or Right MouseButton]</a>

        <script type="text/javascript">
            var options3 = [
                {title:"Some static item 1"},
                {title:"Some static item 2"},
                {title:"AJAX action with callback", action:{type:"ajax","url":"ajax.php?myid=#myid#",callback:"(function(data){alert(data.returnValue);})"}},
                {get:"dynamic.txt"}
            ];

            jQuery("a#MenuB").jjmenu("both", options3, {inputValue: function() { return jQuery("#test").val() }, myid:5});
        </script>
    </p>

    <p class="mt">
        4. Menu Effects  <a href="#" id="MenuEF">[Fade In - Click Me With L or R MouseButton]</a> |
        <a href="#" id="MenuEF2">[Slide Down - Click Me With L or R MouseButton]</a>
        <script type="text/javascript">

            var options3 = [
                {title:"Menu Item 1 - Go TO www.google.com", action:{type:"gourl",url:"http://www.google.com/"}},
                {title:"Menu Item 2 - do <b style='color:red;'>nothing</b>"},
                {title:"Menu Item 3 - submenu", type:"sub", src:[{title:"Submenu 1"},{title:"Submenu 2"},{title:"Submenu 3"}, {title:"Submenu 4 - submenu", type:"sub", src:[{title:"SubSubmenu 1"},{title:"SubSubmenu 2"}]}]},
                {title:"Menu Item 4 - Js function", action:{type:"fn",callback:"(function(){ alert('THIS IS THE TEST'); })"}}
            ];

            jQuery("a#MenuEF").jjmenu("both", options3, {}, {show:"fadeIn", xposition:"left", yposition:"auto", "orientation":"auto"});
            jQuery("a#MenuEF2").jjmenu("both", options3, {}, {show:"slideDown",speed:400, yposition:"bottom", orientation:"top"});
        </script>
    </p>

    <p class="mt">
        5. Other
    <table width="100%" border="1">
        <tr>
            <th> ID </th>
            <th> NAME </th>
            <th> AGE </th>
        </tr>
        <tr class="menu">
            <td>1</td>
            <td>Thomas</td>
            <td>28</td>
        </tr>
        <tr class="menu">
            <td>2</td>
            <td>Jack</td>
            <td>23</td>
        </tr>
        <tr class="menu">
            <td>3</td>
            <td>Paul</td>
            <td>33</td>
        </tr>
    </table>

    <script type="text/javascript">
        jQuery("tr.menu td").jjmenu("both",
                // menu items:
                [ {title:"some static item", customClass:"jj_ItemRed"},
                    {title:"something else", customClass:"jj_ItemBlue"},
                    {getByFunction:function(myData) {
                        return [{title:"ID: "+myData.tbRow()[0] + ", Name: "+myData.tbRow()[1]}, {title:"Current Element: "+myData.td()}];
                    }
                    }
                ],
                // myReplaces / userData:
                {   "tbRow":function(){
                    var tr = jQuery(triggerElement).parent("tr");
                    var td = [];
                    jQuery(tr).children("td").each(function() {
                        td[td.length] = jQuery(this).html();
                    });
                    return td;
                },
                    "td":function() { return $(triggerElement).html(); }
                },
                // effects:
                {show:"fadeIn", xposition:"mouse", yposition:"mouse"});
    </script>


    </p>
</div>

</div>

</body>
</html>
